<template>
  <div v-show="!isFilterCallbackMode" class="op-group comp-op-reset">
    <div class="op-title">重新赋值</div>
    <div class="option-item">
      <div v-if="!isEditMode" class="title-row no-sub">
        <span class="label">
          <span
            class="view-icon"
            title="预览"
            @mouseleave="onMouseLeave()"
            @mouseenter="onMouseEnter($event, cellResetSelectCellReset)"
          >
            <img src="~@/assets/dataset/preview.png" alt="preview" />
          </span>
          重新赋值为"Null"
        </span>
        <a-button class="op-btn" size="small" @click="isEditMode = true"
          >编辑</a-button
        >
        <a-button
          class="op-btn"
          type="primary"
          size="small"
          @click="doOptionNull"
          >确定</a-button
        >
      </div>
      <div v-else class="title-row no-sub cell-replace fixed">
        <span class="label">
          <span
            class="view-icon"
            title="预览"
            @mouseleave="onMouseLeave()"
            @mouseenter="onMouseEnter($event, cellResetSelectCellReset)"
          >
            <img src="~@/assets/dataset/preview.png" alt="preview" />
          </span>
          重新赋值为</span
        >
        <a-input-number
          v-if="isNumberColumn"
          v-model="replaceValue"
          class="cell-replace-value fixed"
          style="width: 100%;"
          placeholder="Null"
          size="small"
          @change="onInput"
        ></a-input-number>
        <a-input
          v-else
          v-model="replaceValue"
          class="cell-replace-value fixed"
          style="width: 100%;"
          placeholder="Null"
          size="small"
          @input="onInput"
        ></a-input>
        <div class="button-group pb10">
          <a-button
            class="op-btn"
            type="primary"
            size="small"
            @click="doOption(cellResetSelectCellReset)"
            >确定</a-button
          >
          <a-button class="op-btn" size="small" @click="cancel">取消</a-button>
          <div class="clear-float"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import DataStore, { OptionPreViewAction } from '@/store/modules/dataview'
import { Component, Vue } from 'vue-property-decorator'

@Component({
  components: {},
})
export default class CellReset extends Vue {
  mounted() {
    DataStore.setCellResetSelectCellResetValue(this.replaceValue)
  }
  /** 操作(重新赋值为null) */
  cellResetSelectCellReset: string =
    OptionPreViewAction.cellResetSelectCellReset

  /** 编辑模式 */
  isEditMode: boolean = false

  /** 替换值 */
  replaceValue: string = ''

  /** 筛选模式是否生效，无选项时隐藏面板 */
  get isFilterCallbackMode() {
    return DataStore.vrCurrenSetMode !== null
  }

  /** 判断当前是否为数值列 */
  get isNumberColumn() {
    const selectCell = DataStore.tableSelectCells[0]
    if (selectCell) {
      const columnFind = DataStore.tableColumns.find((column) => {
        return (
          selectCell &&
          column.name === selectCell.columnName &&
          ['decimal', 'int'].includes(column.desc || '')
        )
      })
      return !!columnFind
    }
    return false
  }

  /** 输入事件 */
  onInput() {
    this.$nextTick(() => {
      DataStore.setCellResetSelectCellResetValue(this.replaceValue)
    })
  }

  /** 预览鼠标移入 */
  onMouseEnter(event: any, action: string) {
    const target = event.target as HTMLElement
    if (target) {
      DataStore.setPreviewAction(action)
      DataStore.setHoverYPos(target.getBoundingClientRect().top - 16)
    }
  }

  /** 预览鼠标移出 */
  onMouseLeave() {
    DataStore.setHoverYPos(-1)
  }

  /** 重新赋值为Null */
  doOptionNull() {
    this.replaceValue = ''
    this.onInput()
    this.doOption(this.cellResetSelectCellReset)
  }

  /** 执行操作 */
  doOption(option: string) {
    if (option === `${OptionPreViewAction.cellResetSelectCellReset}`) {
      this.$emit('actiondone', {
        action: option,
        desc: '单元格 > 重新赋值 > 重新赋值为null',
        data: {
          replaceValue: this.replaceValue,
        },
      })
    }
  }

  /** 取消 */
  cancel() {
    this.replaceValue = ''
    this.isEditMode = false
    this.onInput()
  }
}
</script>
<style lang="less" scoped>
@import url('../op.less');
</style>
